<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.yuyue_sn" clearable placeholder="预约单号" style="width: 200px;" class="filter-item" />
      <!-- <el-input v-model="listQuery.xiaoqu" placeholder="小区名字" style="width: 200px;" class="filter-item" /> -->
      <el-select v-model="listQuery.status" clearable placeholder="状态" style="width: 140px" class="filter-item">
        <el-option v-for="item in statusOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-select v-model="listQuery.type" clearable placeholder="类型" style="width: 140px" class="filter-item">
        <el-option v-for="item in typelist" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <!-- <el-select v-model="listQuery.status" placeholder="类型" style="width: 90px" class="filter-item">
        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="listQuery.type" placeholder="类型" style="width: 90px" class="filter-item">
        <el-option v-for="item in statuse" :key="item" :label="item" :value="item" />
      </el-select> -->
      <!-- <el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
      </el-select>
      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select> -->
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
        查询
      </el-button>
      <!-- <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        Add
      </el-button> -->
      <!-- <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        Export
      </el-button>
      <-->
      <!-- <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
        操作者
      </el-checkbox> -->
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">

      <el-table-column align="center" label="ID" width="60">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80px" align="left" label="用户ID" >
        <template slot-scope="scope">
          <span>{{ scope.row.user_id }}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="left" label="预约单号" >
        <template slot-scope="scope">
          <span>{{ scope.row.yuyue_sn }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80px" align="left" label="预约类型">
        <template slot-scope="scope">
          <span>{{ scope.row.type | typefn }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="left" label="预约时间" >
        <template slot-scope="scope">
          <span  v-if="scope.row.stime_id">{{ scope.row._stime.v_vals }} ~ {{ scope.row._etime.v_vals }}</span>
          <span v-else>自助</span>
        </template>
      </el-table-column>

      <el-table-column  align="left" label="报修类型" >
        <template slot-scope="scope">
          <span>{{ scope.row.bx_id || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column  align="left" label="小区">
        <template slot-scope="scope">
          <span>{{ scope.row._wydata.xiaoqu }}</span>
        </template>
      </el-table-column>
      <el-table-column  align="left" label="预约地址">
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column  align="left" label="预约人">
        <template slot-scope="scope">
          <span>{{ scope.row._address.name }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="left" label="预约电话">
        <template slot-scope="scope">
          <span>{{ scope.row._address.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column width="160px" align="left" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.add_time | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column width="160px" align="left" label="更新时间">
        <template slot-scope="scope">
          <span>{{ scope.row.update_time | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column  align="left" label="预约状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status | statufn}}</span>
        </template>
      </el-table-column>
      <el-table-column  align="left" label="备注">
        <template slot-scope="scope">
          <span>{{ scope.row.notestr||'-'  }}</span>
        </template>
      </el-table-column>
      <el-table-column  align="left" label="接单ID">
        <template slot-scope="scope">
          <span>{{ scope.row.touser_id||'-' }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column min-width="300px" label="Title">
        <template slot-scope="{row}">
          <router-link :to="'/report/edit/'+row.id" class="link-type">
            <span>{{ row.title }}</span>
          </router-link>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" v-if="row.status == 1" @click="handleUpdate(row)">
            接单
          </el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(row,$index)">
            删除
          </el-button> -->
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />



      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
        <el-form ref="dataForm" :model="temp" :rules="rules" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">


          <el-form-item label="所属城市" prop="city">
            <el-input v-model="temp.city" />
          </el-form-item>
          <el-form-item label="所属区县" prop="quxian">
            <el-input v-model="temp.quxian" />
          </el-form-item>
          <el-form-item label="物业公司" prop="wuye">
            <el-input v-model="temp.wuye" />
          </el-form-item>
          <el-form-item label="小区名称"  prop="xiaoqu">
            <el-input v-model="temp.xiaoqu" />
          </el-form-item>

          <el-form-item label="是否启用">
            <el-switch
              v-model="temp.status"
              active-color="#13ce66"
              inactive-color="#ff4949">
              </el-switch>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
            提交
          </el-button>
        </div>
      </el-dialog>


  </div>


</template>

<script>
export { parseTime, formatTime } from '@/utils'
import { getwuyeorderlist,storewuyeoder ,delwuye} from '@/api/article'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
const __ = {
  formatDate: (date, fmt) => {
    const padLeftZero = (str) => {
      return ('00' + str).substr(str.length)
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
    }
    for (const k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
        const str = o[k] + ''
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
      }
    }
    return fmt
  }
}
export default {
  name: 'ArticleList',
  components: { Pagination },
  filters: {

    formatDate(time) {
      if(!time) return '-';
      console.log(time)
      return __.formatDate(new Date(time - 0), 'yyyy-MM-dd hh:mm:ss')
    },
    typefn(s){
      if(s == 1)return '废品';
      return '报修';
    },

    statufn(s){
      console.log(s,'====')
      if(s == 1)return '等待接单';
      if(s == 2)return '等待上门';
      if(s == 3)return '已完成';
      if(s == 4)return '预约取消';
      return '-';
    }
    // statusFilter(status) {
    //   const statusMap = {
    //     published: 'success',
    //     draft: 'info',
    //     deleted: 'danger'
    //   }
    //   return statusMap[status]
    // }
  },
  data() {
    return {
      statusOptions: [
        { label: '等待接单', key: 1},
        { label: '等待上门', key: 2},
        { label: '已完成', key: 3},
        { label: '预约取消', key: 4}
      ],
      typelist: [
        { label: '废品', key: 1},
        { label: '报修', key: 2}
      ],
      textMap:{
        'update': '更新',
        'create': '创建'
      },
      dialogStatus:'create',
      dialogFormVisible: false,
      temp: {
        city: '',
        quxian: '',
        wuye: '',
        xiaoqu: '',
        status: true
      },
      rules: {
        city: [{ required: true, message: '商品名字 is required', trigger: 'blur' }],
        quxian: [{ required: true, message: '商品副标题 is required', trigger: 'blur' }],
        wuye: [{ required: true, message: '商品关键字 is required', trigger: 'blur' }],
        xiaoqu: [{ required: true, message: '商品简介 is required', trigger: 'blur' }]
      },
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 0,
        yuyue_sn: '',
        status: '',
        type: '',
        limit: 20
      }
    }
  },
  watch: {
    // 'listQuery.status'(a,b){
    //   // console.log(a)
    //   this.getList()
    // }
  },
  created() {
    this.getList()
  },
  methods: {
    handleDelete(data){

      this.$confirm(`确定要删除 ？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        delwuye({id: data.id}).then((res) => {
          // console.log(res);
          this.$notify({
            title: 'Success',
            message: '删除成功！',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })

      }).catch(() => {
        this.listLoading = false;
      });
    },
    handleUpdate(data){
      this.$confirm(`确定要接单 ？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        storewuyeoder({id: data.id , status: 2}).then((res) => {
          // console.log(res);
          this.$notify({
            title: 'Success',
            message: '成功！',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })

      }).catch(() => {
        this.listLoading = false;
      });
      // console.log(data)
      // this.temp = data;
      // this.dialogStatus = 'update';
      // this.dialogFormVisible = true;

    },
    updateData(){
      this.listLoading = true;
      const tempData = Object.assign({}, this.temp);
      storewuye(tempData).then(response => {
        this.temp = {
          city: '',
          quxian: '',
          wuye: '',
          xiaoqu: '',
          status: true
        };
        this.$message({
          message: 'Success',
          type: 'success'
        });
        this.listLoading = false;
        this.dialogFormVisible = false;

      })
    },
    createData(){
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp);
          tempData['register_time'] = new Date().getTime();
          this.listLoading = true
          storewuye(tempData).then(response => {
            this.temp = {
              city: '',
              quxian: '',
              wuye: '',
              xiaoqu: '',
              status: true
            };
            this.$message({
              message: 'Success',
              type: 'success'
            });
            this.getList();
            this.listLoading = false;
            this.dialogFormVisible = false;
          })
        }
      })


    },
    handleCreate(){
      this.dialogStatus = 'create';
      this.dialogFormVisible = true;
    },
    getList() {
      this.listLoading = true
      // ()
      getwuyeorderlist(this.listQuery).then(response => {
        // response.data.forEach(el => el['status'] = !!el['status'])
        this.list = response.data
        this.total = response.count
        this.listLoading = false
      })
      // if(this.listQuery.status === '提款'){
      //   fetchreporttkList(this.listQuery).then(response => {
      //     this.list = response.data.items
      //     this.total = response.data.total
      //     this.listLoading = false
      //   })
      // }
      // if(this.listQuery.status === '充值'){
      //   fetchreportList(this.listQuery).then(response => {
      //     this.list = response.data.items
      //     this.total = response.data.total
      //     this.listLoading = false
      //   })
      // }
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
